<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>待办事项</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body{
            padding-top: 150px;
        }
        h1{
            margin-bottom: 30px;
            font-size:28px;
            color: #999999;
            text-align: center;
            font-family: "楷体";
        }
        #box{
            
            width: 900px;
            /*background: darkgray;*/
            background: url("images/beijing.jpg");
            background-size: 100% 100%;
            height: 440px;
            margin: auto;
            padding-top: 100px;
            padding-bottom: 100px;
        }
        .aa{
            width: 600px;
            margin: auto;
            text-align: center;
        }
        .aa::after{
            content:"";
            display:block;
            clear:both;
        }
        .aa .col-8{
            float: left;
            width: 70%;
        }
        .aa .col-4{
            float: left;
            width: 30%;
        }
        input{
            width: 100%;
            font-size: 16px;
            vertical-align: middle;
            display: inline-block;
            padding: 5px 40px 5px 10px;
        }
        input:active{
            /*border:1px solid ;*/
        }
        button{
            float: right;
            width: 80%;
            font-size: 14px;
            display: inline-block;
            vertical-align: middle;
            /*vertical-align: middle;垂直剧中*/
            padding: 5px 5px;
            outline: none;
            margin-bottom: 30px;
            color: #999999;
            border: 1px solid #999;
        }
        button:hover{
            background-color: #e1e1e1;
            border:1px solid #e1e1e1;
        }
        i img{
            float: right;
            width: 20px;
            height: 20px;
            vertical-align: middle;
        }
        #list{
            /*溢出滚动条   overflow-y: scroll; overflow-x:scroll;*/
            overflow-y: scroll;
            height: 200px;
            width: 600px;
        }
        #list ul{

        }
        #list li{
            margin-bottom: 5px;
            text-align: left;
            list-style: none;
        }
        #list li span{
            color: #585858;
            margin-bottom: 3px;
        }
        #list li span:hover{ border-bottom: 2px solid #585858;

        }
    </style>
</head>
<body>
    <div id="box">
        <h1>待办事项</h1>
        <div class="aa">
            <div class="col-8">
                <input type="text" id="ipt" placeholder="请输入需要查找的内容">
            </div>
            <div class="col-4">
                <button id="add">添加</button>
            </div>
            <ul id="list"></ul>
        </div>
    </div>


    <script>
            var add = document.querySelector('#add');
            add.addEventListener('click',function () {
            var ipt = document.querySelector('#ipt');
            console.log(ipt.value);
            var li = document.createElement('li');
            var span = document.createElement('span');
            var span_text = document.createTextNode(ipt.value);
            span.appendChild(span_text);
            var i = document.createElement('i');
                //创建一个img标签
            var img = document.createElement('img');
                //为图片添加路径
            img.src="images/false.png";
//            var iii = document.createTextNode('移除');
            i.addEventListener('click',function () {
                console.log(this.parentNode);
                var list = document.querySelector('#list');
                list.removeChild(this.parentNode)
            });
                //在i标签中插入图片
            i.appendChild(img);
            li.appendChild(span);
            li.appendChild(i);
            var list = document.querySelector('#list');
            list.appendChild(li)
        })
    </script>
</body>
</html>



